# Slider

<Subtitle>An easily stylable range input.</Subtitle>
<Meta
  name="description"
  content="A high-quality, unstyled React slider component that works like a range input and is easy to style."
/>

import { DemoSliderHero } from './demos/hero';

<DemoSliderHero />

## Usage guidelines

- **Form controls must have an accessible name**: The thumb must have a meaningful label. Prefer using [`<Field>`](/react/components/field) to provide visible text labels and descriptions, or [`<Fieldset>`](/react/components/fieldset) for multi-thumb range sliders. Otherwise, the `aria-label` attribute can be used as an alternative. See the [forms guide](/react/handbook/forms) for more on building form controls.

## Anatomy

Import the component and assemble its parts:

```jsx title="Anatomy"
import { Slider } from '@base-ui-components/react/slider';

<Slider.Root>
  <Slider.Value />
  <Slider.Control>
    <Slider.Track>
      <Slider.Indicator />
      <Slider.Thumb />
    </Slider.Track>
  </Slider.Control>
</Slider.Root>;
```

## Examples

### Range slider

To create a range slider:

1. Pass an array of values and place a `<Slider.Thumb>` for each value in the array
2. Additionally for server-side rendering, specify a numeric `index` for each thumb that corresponds to the index of its value in the value array

Thumbs can be configured to behave differently when they collide during pointer interactions using the `thumbCollisionBehavior` prop on `<Slider.Root>`.

import { DemoSliderRangeSlider } from './demos/range-slider';

<DemoSliderRangeSlider compact />

### Thumb alignment

Set `thumbAlignment="edge"` to inset the thumb such that its edge aligns with the edge of the control when the value is at `min` or `max`, without overflowing the control like the default `"center"` alignment.

A client-only alternative `thumbAlignment="edge-client-only"` can be used to reduce bundle size but only renders after React hydration.

import { DemoSliderEdgeAlignment } from './demos/edge-alignment';

<DemoSliderEdgeAlignment compact />

## API reference

<Reference component="Slider" parts="Root, Value, Control, Track, Indicator, Thumb" />
